<template>
	<div>
		<!-- 面包屑导航区域 -->

		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 搜索与添加区域 -->
			<el-row :gutter=20>
				<el-col :span="7">
					<el-input placeholder="请输入内容" class="input-with-select" v-model='queryInfo.query' clearable
						@clear="getUserList()">
						<el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
					</el-input>
				</el-col>

			</el-row>
			<el-table :data="gglist" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="公告" prop="title"></el-table-column>
				<el-table-column label="发布时间">
					<template slot-scope='scope'>
						<el-date-picker style="width: 150px;" v-model="scope.row.time" type="date" readonly="true">
						</el-date-picker>
					</template>
				</el-table-column>
				<el-table-column label="发起人" prop="people"></el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope='scope'>
						<el-button type="primary" icon="el-icon-more" size="mini" @click="FindNotice(scope)">
						</el-button>

						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<!-- 公告展示 对话框-->
		<el-dialog title="公告详情" :visible.sync="gonggaoBlooean" width="50%">
			<h1 style="text-align: center;">{{notice.title}}</h1>
			<a>{{notice.content}}</a>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="gonggaoBlooean=false">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 对话框 -->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 获取用户列表的参数对象
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 10
				},
				//控制公告对话框
				gonggaoBlooean: false,
				gglist: [],
				total: 0,
				notice: [],
				addialogVisible: false,
				// 添加用户的表单数据
				addnotice: {
					title: '',
					content: '',
					time: '',
					people: ''
				},
				//添加表单的验证规则
				addFormrules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, {
						min: 3,
						max: 10,
						message: '用户名长度在3到10位',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			FindNotice(scope) {
				this.gonggaoBlooean = true;
				this.notice=scope.row;
			},
			getUserList() {
				this.$http.post("http://localhost:8989/gg/all", this.queryInfo).then(res => {
					console.log(res);

					if (res.data.status !== 200) return this.$message.error("获取用户列表失败");
					this.gglist = res.data.data.list;
					console.log(this.gglist);
					this.total = res.data.total;
				}).catch(e => {
					console.log(e);
				})
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.queryInfo.pagesize = newSize;
				this.getUserList();
			},
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.queryInfo.pagenum = newPage;
				this.getUserList();
			},
			// 监听状态的改变
			userStateChangee(userinfo) {
				console.log(userinfo);
				this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`).then(res => {
					console.log(res);
					if (res.data.meta.status !== 200) {
						userinfo.mg_state = !userinfo.mg_state;
						return this.$message.error('更新用户状态失败');
					}
					this.$message.success('更新用户状态成功');
				});
			}
		},
		created() {
			this.getUserList();
		}

	}
</script>

<style scoped>
</style>
